<template>
  <div>
    <!-- 1. 轮播图模块, 传递参数:
        slide: 轮播图的列表
        attr: 图片的属性
        is-full: 是否平铺图片-->
    <swiper :slides="slides" :attr="'img'" :is-full="true"></swiper>

    <!-- 2. 九宫格板块 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newsList">
          <img src="../../images/menu1.png" alt="" >
          <div class="mui-media-body">新闻资讯</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/photoList">
          <img src="../../images/menu2.png" alt="" >
          <div class="mui-media-body">图片分享</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/goodsList">
          <img src="../../images/menu3.png" alt="" >
          <div class="mui-media-body">商品购买</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu4.png" alt="" >
          <div class="mui-media-body">留言反馈</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu5.png" alt="" >
          <div class="mui-media-body">视频专区</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../../images/menu6.png" alt="" >
          <div class="mui-media-body">联系我们</div>
        </a>
      </li>
    </ul>

  </div>
</template>

<script>
/** 引入轮播图的组件 **/
import Swiper from "../common/Swiper.vue";

/** 向外暴露一个 主页 组件 **/
export default {
  data(){
    return {
      slides: [] // 存储轮播图列表
    }
  },
  created() { // 生命周期函数
    /* 当vue容器挂载后发起请求, 获取轮播图图片 */
    this.getSwipeList();
  },
  methods: {
    /** 获取轮播图的请求 **/
    async getSwipeList(){
      /*使用解构, 请求获取图片数据*/
      const { data } = await this.$http.get("/api/getlunbo");
      /*判断是否请求成功*/
      if( data.status === 0 ) this.slides = data.message;
      else alert("请求失败, 刷新页面试试");
    }
  },
  components: {
    Swiper
  }
}
</script>

<style lang="scss" scoped>
  /** 九宫格的样式表 **/
  .mui-grid-view{
    /* 修改图片的大小为原来的1/2 */
    li{
      img{
        width: 60px;
        height: 60px;
      }
    }
  }
  /* 修改背景颜色为白色, 掩盖图片的背景 */
  .mui-grid-view.mui-grid-9{
    background-color: #fff;
  }
  /* 删除边框线 */
  .mui-grid-view.mui-grid-9 .mui-table-view-cell, .mui-grid-view.mui-grid-9{
    border: none;
  }
  /* 修改描述的字体大小 */
  .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
    font-size: 13px;
  }

</style>